<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="/css/bootstrap/bootstrap.css">
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="/css/bootstrap/bootstrap-theme.css">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script type="text/javascript" src="/js/bootstrap.js"></script>
    <script type="text/javascript" src="/js/jquery.js"></script>

    <title>Document</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->

    <style>
        * {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .nav .nav-content {
            width: 750px;
            margin: 0 auto;
        }
        .nav .nav-content .nav-item .logo-content img{
            width: 222px;
            height: 114px;
            position: absolute;
            left: -106px;
            top: -12px;
        }
        .nav .nav-content .nav-item .logo-content{
            width: 100px;
            height: 85px;
            overflow: hidden;
            position: relative;
        }
        @font-face{
            font-family: QS-R;
            src:url(/font/Quicksand-Regular.ttf);
        }

        @font-face{
            font-family: QS-M;
            src:url(/font/Quicksand-Medium.ttf);
        }

        @font-face{
            font-family: QS-L;
            src:url(/font/Quicksand-Light.ttf);
        }

        @font-face{
            font-family: QS-B;
            src:url(/font/Quicksand-Bold.ttf);
        }

        @font-face{
            font-family: QS-SB;
            src:url(/font/Quicksand-SemiBold.ttf);
        }

        .nav .nav-content .nav-list {
            width: 750px;
            height: 85px;
            display: flex;
            align-items:center;
            justify-content :space-between;
            /* background-color: #F5F5F5; */

        }

        .nav .nav-content .nav-item {
            font-family: QS-M;
            font-size: 24px;
            /* float: left; */

        }

        .nav .nav-content .nav-item:hover {
            cursor: pointer;
            color: blue;
        }

        .choseed-btn {
            color: blue;
        }

    </style>

    <style>
        .clearfix:after {
            content: "";
            display: block;
            font-size: 0;
            clear: both;
            visibility: hidden;

        }

        .loading-bar {
            width:150px;
            height:110px;
            border-radius:8px;
            background-color:#707070;
            opacity:0.8;
            /*background-color:black;*/
            position:absolute;
            left:0;
            right:0;
            top:0;
            bottom:0;
            margin: auto;
            text-align: center;
        }

        @keyframes loading{
            0% {
                transform:rotate(0deg)
            }
            100%{
                transform:rotate(360deg)
            }
        }
        .loading-icon {
            animation:loading linear 1s infinite;
        }
    </style>
    <style>
        .content {
            width: 700px;
            margin: 0 auto;
            font-size: 18px;
            font-family: QS-R;
        }
        .content .item {
            border: 5px solid #004aad;
            width: 460px;
            height: 80px;
            border-radius: 8px;
            margin: 20px auto;
            line-height: 80px;
            text-align: center;
        }

        .content .item:hover{
            text-decoration: underline;
            color: #1758E9;
            cursor: pointer;
        }
        .button {
            width:126px;
            height:30px;
            color:white;
            background-color:#004aad;
            border:none;
            border-radius:8px;
            font-family:QS-M;
            font-size: 20px;
        }
    </style>
</head>
<body onload="getTimeTable()">
<div class="nav">
    <div class="nav-content">
        <input type="hidden" id="userId" th:value="${#session.getAttribute('currentLoginUser').userId}">
        <ul class="nav-list">
            <li class="nav-item">
                <div class="logo-content">
                    <img src="/image/LOGO.png" alt="">
                </div>
            </li>
            <li class="nav-item">
                <span class=""><a style="color: black" href="/courseBordTeacher">Course board</a></span>
            </li>
            <li class="nav-item">
                <span class=""><a href="/timetable">Timetable</a></span>
            </li>
            <li class="nav-item">
                <span class=""><a style="color: black" href="/grade">Grades</a></span>
            </li>
            <li class="nav-item"><span class=""><a style="color: black" href="/drive">Drive</a></span></li>
            <li class="nav-item"   onclick="document.location='/accountInfo'">
                <svg t="1639982246046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8917" width="48" height="48"><path d="M619.064182 504.57971c91.163561-42.401656 154.766046-133.565217 154.766046-239.569358C773.830228 118.724638 655.10559 0 508.819876 0S243.809524 118.724638 243.809524 265.010352c0 106.004141 63.602484 197.167702 154.766045 239.569358C169.606625 555.461698 0 758.989648 0 1002.799172v21.200828h1017.639752v-21.200828c0-243.809524-169.606625-447.337474-398.57557-498.219462z" p-id="8918" fill="#1296db"></path></svg>
            </li>
        </ul>
    </div>
</div>
<div  class="content">
    <div class="table-content">
        <table class="table  table-condensed">
            <tr>
                <th></th>
                <th>Monday</th>
                <th>Tuesday</th>
                <th>Wednesday</th>
                <th>Thursday</th>
                <th>Friday</th>
                <th>Saturday</th>
                <th>Sunday</th>
            </tr>
            <tr id="8">
                <td>8am</td>
                <td class="Monday"></td>
                <td class="Tuesday"></td>
                <td class="Wednesday"></td>
                <td class="Thursday"></td>
                <td class="Friday"></td>
                <td class="Saturday"></td>
                <td class="Sunday"></td>
            </tr>
            <tr id="9">
                <td>9am</td>
                <td class="Monday"></td>
                <td class="Tuesday"></td>
                <td class="Wednesday"></td>
                <td class="Thursday"></td>
                <td class="Friday"></td>
                <td class="Saturday"></td>
                <td class="Sunday"></td>
            </tr>
            <tr id="10">
                <td>10am</td>
                <td class="Monday"></td>
                <td class="Tuesday"></td>
                <td class="Wednesday"></td>
                <td class="Thursday"></td>
                <td class="Friday"></td>
                <td class="Saturday"></td>
                <td class="Sunday"></td>
            </tr>
            <tr id="11">
                <td>11am</td>
                <td class="Monday"></td>
                <td class="Tuesday"></td>
                <td class="Wednesday"></td>
                <td class="Thursday"></td>
                <td class="Friday"></td>
                <td class="Saturday"></td>
                <td class="Sunday"></td>
            </tr>
            <tr id="12">
                <td>12am</td>
                <td class="Monday"></td>
                <td class="Tuesday"></td>
                <td class="Wednesday"></td>
                <td class="Thursday"></td>
                <td class="Friday"></td>
                <td class="Saturday"></td>
                <td class="Sunday"></td>
            </tr>
            <tr id="1">
                <td>1pm</td>
                <td class="Monday"></td>
                <td class="Tuesday"></td>
                <td class="Wednesday"></td>
                <td class="Thursday"></td>
                <td class="Friday"></td>
                <td class="Saturday"></td>
                <td class="Sunday"></td>
            </tr>
            <tr id="2">
                <td>2pm</td>
                <td class="Monday"></td>
                <td class="Tuesday"></td>
                <td class="Wednesday"></td>
                <td class="Thursday"></td>
                <td class="Friday"></td>
                <td class="Saturday"></td>
                <td class="Sunday"></td>
            </tr>
            <tr id="3">
                <td>3pm</td>
                <td class="Monday"></td>
                <td class="Tuesday"></td>
                <td class="Wednesday"></td>
                <td class="Thursday"></td>
                <td class="Friday"></td>
                <td class="Saturday"></td>
                <td class="Sunday"></td>
            </tr>
            <tr id="4">
                <td>4pm</td>
                <td class="Monday"></td>
                <td class="Tuesday"></td>
                <td class="Wednesday"></td>
                <td class="Thursday"></td>
                <td class="Friday"></td>
                <td class="Saturday"></td>
                <td class="Sunday"></td>
            </tr>
            <tr id="5">
                <td>5pm</td>
                <td class="Monday"></td>
                <td class="Tuesday"></td>
                <td class="Wednesday"></td>
                <td class="Thursday"></td>
                <td class="Friday"></td>
                <td class="Saturday"></td>
                <td class="Sunday"></td>
            </tr>
            <tr id="6">
                <td>6pm</td>
                <td class="Monday"></td>
                <td class="Tuesday"></td>
                <td class="Wednesday"></td>
                <td class="Thursday"></td>
                <td class="Friday"></td>
                <td class="Saturday"></td>
                <td class="Sunday"></td>
            </tr>
            <tr id="7">
                <td>7pm</td>
                <td class="Monday"></td>
                <td class="Tuesday"></td>
                <td class="Wednesday"></td>
                <td class="Thursday"></td>
                <td class="Friday"></td>
                <td class="Saturday"></td>
                <td class="Sunday"></td>
            </tr>
        </table>
    </div>
    <div class="btn" style="margin-left: 621px;margin-top: 10px;">
        <input onclick="document.location='/timetable'" type="button" class="button back" Value="Back">
    </div>
</div>
</body>
<script>

    function getTimeTable(){
        $.ajax({
            url:"/getTime/"+ $("#userId").val(),
            method:"GET",
            dataType:"JSON",
            success:function (data) {
                if (data.code===true){
                    let list = data.data;
                    for (let i = 0; i < list.length; i++) {
                        let course = list[i];
                        let courseName = course.courseName;
                        let timeList = course.timeList;
                        for (let j = 0; j < timeList.length; j++) {
                            let time = timeList[j];
                            let start = time.startTime;
                            let end = time.endTime;
                            let week = time.week;
                            console.log(courseName,start,end,week)
                            let selector = `#${start} .${week}`;
                            let currentText = $(selector).text();
                            if (currentText!==''){
                                $(selector).text(currentText+'/'+courseName);
                            }else {
                                $(selector).text(courseName)
                            }

                            selector = `#${end} .${week}`;
                            currentText = $(selector).text();
                            if (currentText!==''){
                                $(selector).text(currentText+'/'+courseName);
                            }else {
                                $(selector).text(courseName)
                            }
                        }
                    }
                }
            }

        })
    }
</script>
</html>